var that;
class Tab {
  constructor(id) {
    that = this;
    //   获取元素
    this.main = document.querySelector(id);
    // console.log(this.main);
    // 获取添加按钮
    this.add = this.main.querySelector(".tabadd");
    // 获取li的父级ul
    this.ul= this.main.querySelector('.fisrstnav ul');
    // 获取section的父级
    this.fsection=this.main.querySelector('.tabscon')
    this.init();
  }
  //   初始化功能
  init() {
    this.updateNode()
    this.add.onclick = this.addTab;
    // init初始化绑定相关元素的事件
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].index = i;
      this.lis[i].onclick = this.toggleTab;
    }
  }
  updateNode(){
     // 获取所有的li标签
     this.lis = this.main.querySelectorAll("li");
     // 获取所有的section
     this.sections = this.main.querySelectorAll("section");
  }
  //1、切换功能
  toggleTab() {
    // console.log(this.index);
    that.clearClass();
    this.className = "liactive";
    that.sections[this.index].className = "conactive";
  }
  //   1-1、清除所有的类名
  clearClass() {
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].className = "";
      this.sections[i].className = "";
    }
  }
  // 2、增加功能
  addTab() {
    that.clearClass();
    // 1、创建元素
    var random = Math.random();
    var li = `<li class="liactive">
    <span>新选项卡</span><span class="iconfont icon-guanbi"></span>
  </li>`;
    var section = `<section class="conactive">${random}</section>`;
    // 2、添加元素
    that.ul.insertAdjacentHTML('beforeend',li);
    that.fsection.insertAdjacentHTML('beforeend',section);
    that.init();
  }
  // 3、删除功能
  removeTab() {}
  // 4、修改功能
  editTab() {}
}
new Tab("#tab");
